<template>
  <div class="whole">
    <!--数量展示-->
    <el-row class="records_top">
      <el-row class="headline"><h2>客户活跃度</h2></el-row>
      <el-row  class="quantity">
        <el-col :span="6">
          <h2>访客浏览量</h2>
          <h3>0</h3>
          <h4>较昨日：20%</h4>
        </el-col>
        <el-col :span="6">
          <h2>订单成交量</h2>
          <h3>0</h3>
          <h4>较昨日：25%</h4>
        </el-col>
        <el-col :span="6">
          <h2>订单付款率</h2>
          <h3>0</h3>
          <h4>较昨日：32%</h4>
        </el-col>
        <el-col :span="6">
          <h2>月总收入</h2>
          <h3>0</h3>
          <h4>较昨日：36%</h4>
        </el-col>
      </el-row>
    </el-row>
    <!--图表展示-->
    <el-row class="records_bottom">
      <el-col  :span="24">

      </el-col>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="用户管理" name="first">
          <al-line :data-list="dataList"></al-line>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <al-pie :data-list="pieList"></al-pie>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="third">
          <al-line :data-list="dataList"></al-line>
        </el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">
          <al-line :data-list="dataList"></al-line>
        </el-tab-pane>
      </el-tabs>
      <el-button type="success" @click="test">点击</el-button>
    </el-row>
  </div>
</template>

<script>
  import {$confirm,weakAlert,strongAlert,notify,$loading} from "../../utils/dialog"
  const lineList = [
    {"date":"2月","value":'2133'},
    {"date":"3月","value":'2053'},
    {"date":"4月","value":'2813'},
    {"date":"5月","value":'2133'},
    {"date":"6月","value":'2333'},
  ];
  const pieList = [
    {"date":"支付宝","value":'2833'},
    {"date":"微信","value":'2060'},
    {"date":"银联","value":'2113'},
  ];
  import AlLine from "../../components/visual/alLine";
  import AlPie from "../../components/visual/alPie";
  export default {
    name: "home",
    components: {AlPie, AlLine},
    data(){
      return{
        dataList:lineList,
        pieList:pieList,
        activeName:"first",
      }
    },
    methods:{
      test(){
        confirm("0----").then(()=>{
          let load = $loading("正在拼命加载中...");
          setTimeout(()=>{
            load.close();
          },2000)
        }).catch(()=>{
          weakAlert('取消成功');
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/assets/css/index";
  .records_top,.records_bottom{
    width:80%;
    margin: 0 auto;
  }
  .records_top{
    height:35%;
  }
  .records_bottom{
    height: 65%;
  }
  .el-tabs__nav-scroll,.el-tabs__nav-scroll{
    background-color: #00ADAD !important;
  }
  .quantity{
    padding-left:20px;
  }
  h2{}
  h3{
    font-size: 16px;
    font-weight: 400;
  }
  h4{
    font-size: 16px;
    font-weight: 100;
  }
</style>
